<template>
	<view class="container">
		<view class="cell mt_8" style="align-items: center">
			<text>头像</text>
			<view class="fx jce aic">
				<button class="block_btn mr_4" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
					<image class="width_56 height_56 br50" :src="getAvatar" mode="aspectFit">
					</image>
				</button>
				<u-icon name="arrow-right" color="#333333" size="32rpx"></u-icon>
			</view>
		</view>
		<view class="cell">
			<text>姓名</text>
			<view class="fx jce aic" @click="nickName = dataInfo.nickName;namePopShow = true">
				<input class="mr_4" type="text" placeholder="请输入" :value="dataInfo.nickName" disabled />
				<u-icon name="arrow-right" color="#333333" size="32rpx"></u-icon>
			</view>
		</view>
		<view class="cell">
			<text>性别</text>
			<view class="fx jce aic" @click="gender = dataInfo.gender;genderShow = true">
				<input class="mr_4" type="text" placeholder="请选择" :value="genderStr" disabled />
				<u-icon name="arrow-right" color="#333333" size="32rpx"></u-icon>
			</view>
		</view>
		<view class="cell">
			<text>出生日期</text>
			<view class="fx jce aic" @click="birthday = dataInfo.birthday;datetimeShow = true">
				<input class="mr_4" type="text" placeholder="请选择" :value="datetimeStr" disabled />
				<u-icon name="arrow-right" color="#333333" size="32rpx"></u-icon>
			</view>
		</view>
		<view class="cell">
			<text>ID</text>
			<view class="fx jce aic">
				<input class="mr_4" type="text" placeholder="请输入" :value="dataInfo.customerId||''" disabled />
			</view>
		</view>
		<view class="cell mt_8">
			<text>邀请人</text>
			<view class="fx jce aic fx_1 pl_6">
				<!-- <input class="mr_4" type="text" placeholder="请输入"
					:value="`${dataInfo.shareName||''}( ID:${dataInfo.shareId||''} )`" disabled /> -->
				{{`${dataInfo.shareName||''}( ID:${dataInfo.shareId||''} )`}}
			</view>
		</view>
		<template v-if="userType==3&&appType==base.ADMIN_TYPE">
			<view class="plr_16 ptb_8">
				资质资料
			</view>
			<view class="cell">
				<text>联系人</text>
				<view class="fx jce aic">
					<input class="mr_4" type="text" placeholder="请输入" :value="dataInfo.contactPerson||''" disabled />
				</view>
			</view>
			<view class="cell">
				<text>联系电话</text>
				<view class="fx jce aic">
					<input class="mr_4" type="text" placeholder="请输入" :value="dataInfo.contactPhone||''" disabled />
				</view>
			</view>
			<view class="cell">
				<text>营业执照</text>
				<view class="fx jce aic">
					<image class="width_90 height_90 br_4" :src="dataInfo.businessLicense" mode="aspectFit"></image>
				</view>
			</view>
			<view class="cell">
				<text>法人身份证正反面</text>
				<view class="fx jce aic">
					<view class="width_90 height_90 br_4 flow_h pr">
						<image class="width_90 height_90" :src="identityPhoto[0]" mode="aspectFit"></image>
						<view class="pa b_0 l_0 r_0 fz_10 fc_fff bc lh_20 fc"
							style="background-color: rgba(0,0,0,0.28);">
							身份证人像面
						</view>
					</view>
					<view class="width_90 height_90 br_4 flow_h pr ml_12">
						<image class="width_90 height_90" :src="identityPhoto[1]" mode="aspectFit"></image>
						<view class="pa b_0 l_0 r_0 fz_10 fc_fff bc lh_20 fc"
							style="background-color: rgba(0,0,0,0.28);">
							身份证国徽面
						</view>
					</view>
				</view>
			</view>
			<view class="cell">
				<text>店铺地址</text>
				<view class="fx jce aic pl_12">
					{{dataInfo.shopAddress||''}}
				</view>
			</view>
			<view class="cell">
				<text>店铺照片</text>
				<view class="fx jce aic">
					<image class="width_90 height_90 br_4" :src="dataInfo.shopPhoto" mode="aspectFit"></image>
				</view>
			</view>
		</template>
		<u-picker :value="dataInfo.gender?dataInfo.gender==1?'男':'女':''" :show="genderShow" :columns="columns"
			@confirm="handleComfirmgender" @cancel="genderShow = false"></u-picker>
		<u-datetime-picker :value="dataInfo.birthday" :maxDate="maxDate" :minDate="31507200000" :show="datetimeShow"
			v-model="birthday" mode="date" @confirm="handleComfirmDatetime" :confirmColor="'#F08519'"
			@cancel="datetimeShow = false"></u-datetime-picker>
		<PopupTemplate :visible.sync="namePopShow" title="修改昵称">
			<input class="mt_42 bob_1 boc_grey" style="width: 100%;text-align: left;" type="text" v-model="nickName" />
			<button class="w100 custom_btn primary lh_40 br_27 fz_14 mt_38" @click="handleConfirmInput">确定</button>
		</PopupTemplate>
	</view>
</template>

<script>
	import PopupTemplate from '@/components/PopupTemplate'
	import api from '@/service/config/api.js'
	import {
		getStaticUrl
	} from '@/utils/index.js'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			PopupTemplate
		},
		data() {
			return {
				base: this.$base,
				namePopShow: false,
				birthday: null,
				datetimeShow: false,
				genderShow: false,
				gender: null,
				columns: [
					['男', '女']
				],
				maxDate: new Date().getTime(),
				minDate: 0,
				dataInfo: {},
				nickName: '',
				avatar: '',
			}
		},
		computed: {
			...mapState(['appType', 'userType']),
			datetimeStr() {
				return this.dataInfo.birthday ? this.$u.timeFormat(this.dataInfo.birthday, 'yyyy年mm月dd日') : ''
			},
			genderStr() {
				return this.dataInfo.gender ? this.dataInfo.gender == 1 ? '男' : '女' : ''
			},
			getStaticUrl() {
				return url => getStaticUrl(url)
			},
			identityPhoto() {
				if (!this.dataInfo.corporateIdentityPhoto) return ''
				return this.dataInfo.corporateIdentityPhoto.split(',')
			},
			getAvatar() {
				if (this.dataInfo.avatar) {
					return this.getStaticUrl(this.dataInfo.avatar)
				}
				return require('@/static/images/avatar_empty.png')
			}
		},
		onShow() {
			this.getData();
		},
		methods: {
			setUserInfo(item, data) {
				return new Promise((resolve, reject) => {
					this.$utils.loading()
					api.post('/user/api/auth/updateUserInfo', {
						[item]: item == 'gender' ? data == '男' ? 1 : 2 : data
					}).then(() => {
						resolve()
					}).catch(() => {
						reject()
					})
				})
			},
			getData() {
				this.$utils.loading()
				api.get(this.$utils.getUserReq()).then(res => {
					this.dataInfo = res.data
				})
			},
			getUserData() {
				this.$utils.loading()
				api.get('/user/api/user/info').then(res => {
					this.dataInfo = res.data
				})
			},
			onChooseavatar(e) {
				let token = `${uni.getStorageSync('tokenType')} ${uni.getStorageSync('token')}`
				uni.showLoading({
					title: '头像上传中...'
				});
				console.log(e)
				uni.uploadFile({
					url: this.$base.BASE_URL + '/admin/sys-file/upload', // 仅为示例，非真实的接口地址
					filePath: e.detail.avatarUrl,
					header: {
						'Authorization': token,
						'Tenant-Id': uni.getStorageSync("tenantId"),
					},
					name: 'file',
					success: (res) => {
						uni.hideLoading()
						if (res.data) {

							const data = JSON.parse(res.data)
							console.log("头像返回", data)
							if (data.data && data.data.url) {
								this.setUserInfo('avatar', data.data.url).then(() => {
									this.$set(this.dataInfo, 'avatar', data.data.url)
								})
							} else {
								this.$utils.showToast('上传失败')
							}
						} else {
							this.$utils.showToast('上传失败')
						}
					},
					fail: (err) => {
						uni.hideLoading()
						this.$utils.showToast('上传失败')
					}
				});
			},
			handleComfirmgender(e) {
				console.log('eeee', e)
				this.gender = e.value[0]
				this.setUserInfo('gender', this.gender).then(() => {
					console.log(9999, this.gender)
					this.$set(this.dataInfo, 'gender', this.gender == '男' ? 1 : 2)
					this.genderShow = false
				})
			},
			handleComfirmDatetime({
				value
			}) {
				this.birthday = uni.$u.timeFormat(value, 'yyyy-mm-dd')
				this.setUserInfo('birthday', this.birthday).then(() => {
					this.datetimeShow = false
					this.$set(this.dataInfo, 'birthday', this.birthday)
				})
			},
			handleConfirmInput() {
				this.setUserInfo('nickName', this.nickName).then(() => {
					this.$set(this.dataInfo, 'nickName', this.nickName)
					this.namePopShow = false
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		.cell {
			padding: 24rpx 32rpx;
			background: #fff;
			@include flex_box(row, no-wrap, space-between, flex-start);
			overflow: hidden;
		}

		input {
			text-align: right;
			width: 400rpx;
		}
	}
</style>